body{padding: 0;margin: 0;}
*{outline:none;}
#maindiv *{transition: 0.7s;}
#maindiv{position: fixed;height: 100%;width: 100%;background-color: #e0ffff;}
#topdiv{position: relative;height: 15%;min-height: 10rem;background-color: #aaffff;overflow: hidden;}

#logindiv{position: absolute; height: 2rem;width: 6rem;text-align: center;line-height: 2rem;background-color: antiquewhite;border-radius: 1rem;right: 2rem;top: 0.5rem;font-weight: 600;}
#logindiv:hover{background-color: burlywood;color: #888888;font-size: 1.2rem;font-weight: 900;}

#searchdiv{position: absolute;height: 2rem; top: calc(50% - 1rem);width: 30rem;left: calc(50% - 15rem);border-radius: 1rem;overflow: hidden;}
#searchdiv:hover{box-shadow: 0.2rem 0.2rem 0.3rem 0.3rem #88bbff;}
#searchdiv>input{width: 80%;border: 0;height: 100%;border-radius: 1rem 0 0 1rem;text-indent:1rem}
#searchdiv>input:focus{box-shadow: 0 0 0 0 #000000;border: 0px none;}
#searchdiv>button{width: 20%;border: 0;height: 100%;border-radius:  0 1rem 1rem 0;padding: 0;margin: 0;font-size: 1.2rem;line-height: 2rem;letter-spacing:0.5rem;font-weight: 600;}
#searchdiv>button:hover{background-color: #aa99aa;}

#newdiv{position: absolute;bottom: 1rem;text-align: center;width: 14rem;left: calc(50% - 7rem);font-size: 1.2rem;height: 1.8rem;line-height: 1.8rem; border: 1px solid #0088FF;background-color: #aabbff;}
#newdiv input[type=radio]{display: none;}
#newdiv input[type=radio]:checked+span{background-color: #4488FF;border-radius: 0.5rem;}
#newdiv label{margin: 0rem 1rem;}


#bottomdiv{position: relative;height: 85%;width: 80%;max-width: 1000px;background-color: #c0F0F0;margin: auto;overflow: hidden;}
#bottomvalue{position: absolute;height: 100%;width: calc(100% + 1.5rem);overflow-y: scroll;}
#myinfo{height: 9rem;width: 9rem;position: relative;}
#myinfo>div:nth-child(1){border-bottom-right-radius: 80%;width: 100%;height: 100%;background-image: url(../img/15.jpg);background-size: 100% 100%;z-index: 5;}
#myinfo>div:nth-child(1):hover{border-radius: 10%;width: 10rem;height: 10rem;}
#myinfo>div:nth-child(2){right: 0;bottom: 0;left: auto;top: auto;font-size: 1.8rem; font-weight: 900;z-index:4;}
#myinfo>div:nth-child(3){z-index: 1;height: 8rem;min-width: 50rem;overflow: hidden;transition: 2s;transition-timing-function: ease;position: fixed;left: -50rem;}
#myinfo>div{position: absolute;left: 0;top: 0;}
#myuserinfo[open1="true"]{left: 10rem !important;}
#myuserinfo table{background-color: #99ff88;top: 1.5rem;position: relative;width: 100%;}
#myuserinfo tr{height: 3rem;}
#myuserinfo td{padding: 0 0.5rem;}
#myuserinfo td button{width: 100%;}

.users{position:relative; width: 85%;border: 2px solid #888888;height: 15rem;margin: 2rem auto;border-top: 10px double #000000;}
.users>div{position: relative;float: left;height: 100%;background-color: #aaeeFF;}
.users div{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
.usersinfo{width: 40%;}
.usersinfo>div:nth-child(1){position: relative;width: 80%;height: 70%;margin: auto;top: 10%;background-image: url(../img/13.jpg);background-size: 100% 100%;}
.usersinfo>div:nth-child(2){position: absolute;width: 100%;height: 2.7rem;bottom: 0px;left: 0px;font-size: 1rem;line-height: 2.7rem;text-align: center;}
.usersinfo>div:nth-child(2)>div{margin: auto;text-align: center;position: relative;display: inline-block;overflow: hidden;height: 100%;white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis;}
.usersinfo>div:nth-child(2)>div:nth-child(1){max-width: 60%;}
.usersinfo>div:nth-child(2)>div:nth-child(2){max-width: calc(40% - 1rem);margin:0 0 0 0.5rem;}
.userspic{width: calc(20%);}
.userspic>div:nth-child(1){background-color: #a0e0f0 ;position: absolute;width: calc(100% - 2px);height: 70%;top: 10%;border-bottom: 3px;border: 1px solid #888888;background-image: url(../img/14.jpg);background-size: 100%;background-position: center;background-repeat: no-repeat;overflow: hidden;}
.userspic>div:nth-child(1)>div{position: absolute;top: 100%;background-color: rgba(200,220,250,0.6);height: 100%;width: 100%;white-space:pre-line; word-break: break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow-y: auto;}
.userspic>div:nth-child(1):hover>div{top: 0%;}
.userspic>div:nth-child(1):hover{background-position: top center;background-size: auto;}
.userspic>div:nth-child(2){position: absolute;width: 100%;text-align: center;bottom: 1rem;}
.butzan{border-style: inset;margin: 0 0 0 0.5rem;}
.butzan:active{border-style: outset;}
.butload{margin: 5rem auto;position: relative;width: 10rem;height: 2rem;font-size: 1.5rem;display: block;clear: both;}

.pics{width: 25%;height: 12rem;float: left;position: relative;}
.pics>div:nth-child(1){background-color: #a0e0f0 ;position: absolute;width: calc(98% - 2rem);margin:auto 0.8rem;height: 70%;top: 10%;border-bottom: 3px;border: 1px solid #888888;background-image: url(../img/14.jpg);background-size: 100%;background-position: center;background-repeat: no-repeat;overflow: hidden;}
.pics>div:nth-child(1)>div{position: absolute;top: 100%;background-color: rgba(200,220,250,0.6);height: 100%;width: 100%;white-space:pre-line; word-break: break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow-y: auto;}
.pics>div:nth-child(1):hover>div{top: 0%;}
.pics>div:nth-child(1):hover{background-position: top center;background-size: auto;}
.pics>div:nth-child(2){position: absolute;width: 100%;text-align: center;bottom: 0.5rem;}